var aLi = document.querySelectorAll("li");
var aP = document.querySelectorAll("p");
var aSpan = document.querySelectorAll(".close");

for (var i = 0; i < aLi.length - 1; i++) {
  aLi[i].index = i;
  aLi[i].onclick = function () {
    if (aP[this.index].style.display == "none") {
      for (var k = 0; k < aP.length; k++) {
        aP[k].style.display = "none";
        aLi[k].style.backgroundImage = "";
      }
      aP[this.index].style.display = "block";
      aLi[this.index].style.backgroundImage = "linear-gradient(#8f8f8f,#e5e5e5)";
    } else {
      aP[this.index].style.display = "none";
      aLi[this.index].style.backgroundImage = "";
      aLi[this.index].style.backgroundColor = "black";
    }
  }
}

for (var j = 0; j < aSpan.length; j++) {
  aSpan[j].index = j;
  aSpan[j].onclick = function () {
    aP[this.index].style.display = "none";
    aLi[this.index].style.backgroundImage = "";
    aLi[this.index].style.backgroundColor = "black";
  }
}

var oIcon = document.querySelector("#icon");
var count = 1;
oIcon.onclick = function () {
  count++;
  if (count % 2 == 0) {
    for (var i = 0; i < aP.length; i++) {
      aP[i].index = i;
      aP[i].style.display = "block";
      aP[i].style.position = "static";
      aLi[i].style.backgroundColor = "rgba(255,0,0,.5)";
    }
  } else {
    for (var i = 0; i < aP.length; i++) {
      aP[i].index = i;
      aP[i].style.display = "none";
      aP[i].style.position = "absolute";
      aLi[i].style.backgroundColor = "black";
    }
  }
}